<template>
  <div class="login">
    <van-nav-bar
      title="登录"
      left-arrow
      @click-left="onClickLeft"
      v-show="show == false"
    >
      <template #right> <van-icon name="ellipsis" size="18" /> </template
    ></van-nav-bar>
    <van-nav-bar
      title="注册"
      left-arrow
      @click-left="onClickLeft"
      v-show="show == true"
    >
      <template #right> <van-icon name="ellipsis" size="18" /> </template
    ></van-nav-bar>
    <!-- 第一个 -->
    <div class="box" v-show="show == false">
      <img
        src="	https://s.yezgea02.com/1604045825972/newbee-mall-vue3-app-logo.png"
        alt=""
      />
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            center
            clearable
            label="验证码"
            placeholder="输入验证码"
            v-model="verify1"
          >
            <template #button>
              <vueImgVerify ref="verifyRef1" @tie="active" />
            </template>
          </van-field>
        </van-cell-group>
        <div class="deng">
          <span @click="active">立即注册</span>
        </div>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            @click="btn1"
          >
            登录
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- 第一个 -->

    <!-- 第二个 -->
    <div class="box" v-show="show == true">
      <img
        src="	https://s.yezgea02.com/1604045825972/newbee-mall-vue3-app-logo.png"
        alt=""
      />
      <van-form @submit="onS">
        <van-cell-group inset>
          <van-field
            v-model="user"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="pass"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            center
            clearable
            label="验证码"
            placeholder="输入验证码"
            v-model="verify2"
          >
            <template #button>
              <vueImgVerify ref="verifyRef2" @tie="active" />
            </template>
          </van-field>
        </van-cell-group>
        <div class="deng">
          <span @click="active">已有登录账号</span>
        </div>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            @click="btn2"
          >
            注册
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- 第二个 -->
  </div>
</template>

<script>
import { reactive, toRefs, computed, watch, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBaner, poszhu, LOGIN } from '../../request/api.js'
import vueImgVerify from '../components/vueImgVerify'
import { Toast } from 'vant'
import md5 from 'js-md5'
export default {
  components: {
    vueImgVerify,
  },
  setup() {
    //登录
    const username = ref('')
    const password = ref('')
    const passwordMD5 = ref('')
    const onSubmit = (values) => {
      console.log('submit', values)
    }
    const setStr = () => {
      passwordMD5.value = md5(password.value)
    }
    const user = ref('')
    const pass = ref('')
    const onS = (values) => {
      console.log('submit', values)
    }
    //登录

    const verifyRef1 = ref(null)
    const verifyRef2 = ref(null)
    const state = reactive({
      verify1: '',
      verify2: '',
      show: false,
    })
    // onMounted(async () => {
    //   console.log('00')
    // })
    const router = useRouter()
    const btn1 = function () {
      setStr()
      if (verifyRef1.value.imgCode === state.verify1) {
        Toast.success('验证码输入正确')

        let obj = {
          loginName: username,
          password: passwordMD5,
        }
        LOGIN(obj).then((res) => {
          console.log(res)
          if (res.data.resultCode == 200) {
            router.push({ path: '/home' })
            Toast.success('登陆成功')
            localStorage.setItem('token', res.data.data)
          }
        })
      } else {
        Toast.fail('验证码输入错误')
        verifyRef1.value.handleDraw()
        state.verify1 = ''
      }
    }
    const btn2 = function () {
      if (verifyRef2.value.imgCode === state.verify2) {
        Toast.success('验证码输入正确')
        let a = md5(`${pass}`)
        console.log(a)
        let obj = {
          loginName: user,
          password: pass,
        }

        poszhu(obj).then((res) => {
          console.log(res)
          Toast.success(res.data.message)
        })
      } else {
        Toast.fail('验证码输入错误')
        verifyRef2.value.handleDraw()

        state.verify2 = ''
      }
    }
    const active = () => {
      state.show = !state.show
      verifyRef1.value.handleDraw()
      verifyRef2.value.handleDraw()
    }
    return {
      ...toRefs(state),
      btn1,
      btn2,
      verifyRef1,
      verifyRef2,
      username,
      password,
      onSubmit,
      active,
      pass,
      user,
      onS,
    }
  },
}
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
}
.box {
  width: 700px;
  height: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  img {
    width: 300px;
    height: 300px;
  }
}
.deng {
  width: 100%;
  text-align: left;
  color: rgba(72, 136, 233, 0.867);
}
</style>
